import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:study_online/global/colors.dart';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body: MedicineInstituteTab(),
      ),
    );
  }
}

class MedicineInstituteTab extends StatelessWidget {
  MedicineInstituteTab({Key key}) : super(key: key);

  Widget _titleWidget(value, num) {
    return Container(
      margin: EdgeInsets.fromLTRB(
        ScreenUtil().setWidth(46),
        ScreenUtil().setHeight(50),
        ScreenUtil().setWidth(0),
        ScreenUtil().setHeight(0),
      ),
      height: ScreenUtil().setHeight(74),
      child: Stack(
        children: [
          Positioned(
            bottom: 0,
            left: 0,
            child: Container(
              height: ScreenUtil().setHeight(14),
              width: ScreenUtil().setWidth(47) * num,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                    Radius.circular(ScreenUtil().setHeight(7))),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.center,
                  stops: [0.0, 1.0],
                  colors: [AppColors.primary, Color(0x542DCA97)],
                ),
              ),
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            child: Text(
              value,
              style: TextStyle(
                fontSize: ScreenUtil().setSp(52),
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Padding(
              padding: EdgeInsets.only(right: ScreenUtil().setWidth(35)),
              child: Text(
                '查看全部>',
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color: AppColors.subtext,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _singleSpecializedCoursewidget(BuildContext context,String imgUrl,String name){
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, 'computerScience');
      },
      child: Container(
        width: ScreenUtil().setWidth(200),
        height: ScreenUtil().setHeight(200),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipOval(
              child: Image.asset(
                imgUrl,
                width: ScreenUtil().setHeight(130),
                height: ScreenUtil().setHeight(130),
                fit: BoxFit.fitHeight,
              ),
            ),
            Text(
              name,
              style: TextStyle(
                fontSize: ScreenUtil().setSp(34),
                color: Colors.black,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
  
  Widget _specializedCoursewidget(context) {
    return Wrap(
      //spacing: ScreenUtil().setWidth(35),
      children: [
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '药学'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '中药学'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '药物制剂'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '中药资源与开发'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '制药工程'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '生物工程'),
        _singleSpecializedCoursewidget(context, 'assets/img/qq.png', '食品科学与工程'),
      ],
    );
  }

  Widget _courseListWidget() {
    return Container(
      height: ScreenUtil().setHeight(500),
      //width: double.infinity,//宽度自适应
      padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
      child: ListView.builder(
        scrollDirection: Axis.horizontal, //设置水平列表
        itemBuilder: (context, index) {
          var itemWidth = (ScreenUtil().screenWidth - 120) / 2;
          return InkWell(
            onTap: () {
              Navigator.pushNamed(context, 'courseDetail',);
            },
            child: Container(
              width: itemWidth, //实现在wrap中平铺,高度自适应
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(-1, 1.0),
                    blurRadius: 1.0,
                    spreadRadius: 0.6,
                  ),
                ],
              ),
              margin: EdgeInsets.all(10),
              child: Column(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    child: AspectRatio(
                      aspectRatio: 2 / 1, //防止服务器返回的图片高度不一致
                      child: ClipRRect(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        child: Image.network(
                          'https://img1.baidu.com/it/u=3396838262,522903359&fm=26&fmt=auto&gp=0.jpg',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(20),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      '四级专题课',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.black54,
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      top: ScreenUtil().setHeight(20),
                    ),
                    child: Row(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.topLeft,
                          child: Text(
                            '￥188.0',
                            style: TextStyle(
                              color: Colors.red,
                              fontSize: ScreenUtil().setSp(45),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Icon(
                                Icons.group_sharp,
                                size: ScreenUtil().setSp(45),
                                color: Colors.black54,
                              ),
                              SizedBox(
                                width: ScreenUtil().setWidth(18),
                              ),
                              Text(
                                '3000',
                                style: TextStyle(
                                  fontSize: ScreenUtil().setSp(45),
                                  color: Colors.black38,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        itemCount: 10,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //debugPaintSizeEnabled = true;
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(1080, 2340),
    );
    return ListView(
      children: [
        _titleWidget('专业课', 3),
        SizedBox(
          height: ScreenUtil().setHeight(30),
        ),
        _specializedCoursewidget(context),
        _titleWidget('区块链', 3),
        _courseListWidget(),
        _titleWidget('android', 3.4),
        _courseListWidget(),
        _titleWidget('Linuix运维', 4.5),
        _courseListWidget(),
      ],
    );
  }
}
